<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站红包发布页</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #E63946;
      --secondary: #FFB703;
      --accent: #FB8500;
      --success: #219EBC;
      --danger: #E63946;
      --dark: #1D3557;
      --light: #F1FAEE;
      --white: #FFFFFF;
      --gold: #FFD700;
      --red-light: #FFE5E7;
      
      /* 红包主题 */
      --theme1: #E63946;
      --theme2: #9B2226;
      --theme3: #FF8FA3;
      --theme4: #1D3557;
      --theme5: #FFB703;
      --theme6: #700961;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
      position: relative;
      overflow: hidden;
    }
    
    /* 红包页面容器 */
    .redpacket-page {
      display: none;
      min-height: 100vh;
      flex-direction: column;
    }
    
    .redpacket-page.active {
      display: flex;
      animation: fadeIn 0.3s ease;
    }
    
    /* 导航栏 */
    .navbar {
      padding: 12px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
      background-color: var(--white);
      z-index: 10;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
    }
    
    .nav-btn {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
    }
    
    .cancel-btn {
      color: #666;
    }
    
    .send-btn {
      background-color: var(--primary);
      color: white;
      transition: all 0.2s;
    }
    
    .send-btn:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }
    
    /* 内容区域 */
    .content {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }
    
    /* 红包金额输入区 */
    .amount-section {
      text-align: center;
      padding: 20px 0;
    }
    
    .amount-label {
      font-size: 16px;
      color: #666;
      margin-bottom: 10px;
    }
    
    .amount-input-container {
      position: relative;
      display: inline-block;
      margin: 10px 0 20px;
    }
    
    .amount-input {
      font-size: 48px;
      font-weight: 700;
      text-align: center;
      border: none;
      outline: none;
      width: 200px;
      color: var(--primary);
      padding: 10px 0;
      background-color: transparent;
    }
    
    .amount-unit {
      position: absolute;
      font-size: 24px;
      font-weight: 600;
      color: var(--primary);
      right: -30px;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .amount-tips {
      font-size: 13px;
      color: #999;
      margin-top: 5px;
    }
    
    /* 红包类型选择 */
    .type-selector {
      display: flex;
      gap: 10px;
      margin: 20px 0;
      overflow-x: auto;
      padding-bottom: 10px;
    }
    
    .type-option {
      flex: 1;
      min-width: 100px;
      padding: 15px 10px;
      border-radius: 12px;
      border: 1px solid #eee;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .type-option.active {
      border-color: var(--primary);
      background-color: rgba(230, 57, 70, 0.05);
    }
    
    .type-icon {
      font-size: 24px;
      color: var(--primary);
      margin-bottom: 5px;
    }
    
    .type-name {
      font-size: 14px;
      font-weight: 500;
    }
    
    /* 红包信息设置 */
    .redpacket-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    
    .form-label {
      font-size: 14px;
      color: #333;
      font-weight: 500;
    }
    
    .form-control {
      padding: 12px 15px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 15px;
      transition: border-color 0.2s;
    }
    
    .form-control:focus {
      border-color: var(--primary);
      outline: none;
    }
    
    .count-input-group {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .count-btn {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      border: 1px solid #ddd;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
      color: #666;
      transition: all 0.2s;
    }
    
    .count-btn:hover {
      background-color: #f5f5f5;
    }
    
    .count-input {
      flex: 1;
      text-align: center;
    }
    
    /* 祝福语选择区 */
    .blessings-section {
      margin-top: 10px;
    }
    
    .blessings-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
    
    .blessing-item {
      padding: 8px 15px;
      background-color: #f5f5f5;
      border-radius: 20px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .blessing-item:hover {
      background-color: #eee;
    }
    
    .blessing-item.active {
      background-color: var(--red-light);
      color: var(--primary);
    }
    
    /* 领取范围选择 */
    .range-section {
      margin-top: 10px;
    }
    
    .range-options {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }
    
    .range-option {
      flex: 1;
      padding: 12px 0;
      border: 1px solid #ddd;
      border-radius: 8px;
      text-align: center;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s;
    }
    
    .range-option.active {
      border-color: var(--primary);
      color: var(--primary);
      background-color: rgba(230, 57, 70, 0.05);
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 主题样式 */
    .theme1 { --primary: var(--theme1); }
    .theme2 { --primary: var(--theme2); }
    .theme3 { --primary: var(--theme3); }
    .theme4 { --primary: var(--theme4); }
    .theme5 { --primary: var(--theme5); }
    .theme6 { --primary: var(--theme6); }
    
    .theme1 .type-option.active,
    .theme1 .range-option.active {
      background-color: rgba(230, 57, 70, 0.05);
    }
    
    .theme2 {
      --red-light: #FFF0F0;
    }
    
    .theme3 {
      --red-light: #FFF5F8;
    }
    
    .theme4 {
      --red-light: #E8F4F8;
      --dark: white;
      --light: #0F2542;
      --white: #1D3557;
    }
    
    .theme4 .navbar,
    .theme4 .form-control,
    .theme4 .type-option,
    .theme4 .range-option,
    .theme4 .count-btn,
    .theme4 .blessing-item {
      background-color: #0F2542;
      border-color: #2A4365;
      color: white;
    }
    
    .theme4 .cancel-btn,
    .theme4 .amount-label,
    .theme4 .amount-tips,
    .theme4 .form-label {
      color: #CBD5E0;
    }
    
    .theme4 .blessing-item {
      background-color: #2A4365;
    }
    
    .theme4 .blessing-item.active {
      background-color: rgba(33, 158, 188, 0.2);
    }
    
    .theme5 {
      --red-light: #FFF9EB;
    }
    
    .theme5 .type-icon,
    .theme5 .amount-input,
    .theme5 .amount-unit {
      color: var(--gold);
    }
    
    /* 红包装饰元素 */
    .redpacket-decoration {
      position: absolute;
      pointer-events: none;
      opacity: 0.1;
      z-index: 0;
    }
    
    .decor-top-left {
      top: -20px;
      left: -20px;
      font-size: 100px;
      transform: rotate(-15deg);
    }
    
    .decor-bottom-right {
      bottom: -30px;
      right: -20px;
      font-size: 120px;
      transform: rotate(15deg);
    }
    
    /* 动画 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    
    .floating {
      animation: float 3s ease-in-out infinite;
    }
    
    /* 响应式 */
    @media (max-width: 360px) {
      .amount-input {
        font-size: 40px;
        width: 160px;
      }
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">红包样式</div>
    <div class="switcher-option active" data-style="1">传统红包</div>
    <div class="switcher-option" data-style="2">喜庆红包</div>
    <div class="switcher-option" data-style="3">浪漫红包</div>
    <div class="switcher-option" data-style="4">商务红包</div>
    <div class="switcher-option" data-style="5">新年红包</div>
    <div class="switcher-option" data-style="6">个性红包</div>
  </div>
  
  <div class="container">
    <!-- 1. 传统红包 -->
    <div class="redpacket-page active theme1" id="style1">
      <i class="fa fa-envelope redpacket-decoration decor-top-left floating"></i>
      <i class="fa fa-gift redpacket-decoration decor-bottom-right floating" style="animation-delay: 1s;"></i>
      
      <div class="navbar">
        <div class="nav-btn cancel-btn">取消</div>
        <div class="nav-title">发红包</div>
        <div class="nav-btn send-btn">塞钱进红包</div>
      </div>
      
      <div class="content">
        <div class="amount-section">
          <div class="amount-label">红包金额</div>
          <div class="amount-input-container">
            <input type="number" class="amount-input" value="10" min="0.01" step="0.01">
            <span class="amount-unit">元</span>
          </div>
          <div class="amount-tips">最少0.01元，最多200元</div>
        </div>
        
        <div class="type-selector">
          <div class="type-option active">
            <div class="type-icon"><i class="fa fa-random"></i></div>
            <div class="type-name">拼手气</div>
          </div>
          <div class="type-option">
            <div class="type-icon"><i class="fa fa-balance-scale"></i></div>
            <div class="type-name">普通红包</div>
          </div>
          <div class="type-option">
            <div class="type-icon"><i class="fa fa-calendar"></i></div>
            <div class="type-name">定时红包</div>
          </div>
        </div>
        
        <form class="redpacket-form">
          <div class="form-group">
            <label class="form-label">红包个数</label>
            <div class="count-input-group">
              <div class="count-btn minus-btn">-</div>
              <input type="number" class="form-control count-input" value="5" min="1" max="100">
              <div class="count-btn plus-btn">+</div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">红包留言</label>
            <input type="text" class="form-control" placeholder="恭喜发财，大吉大利">
          </div>
          
          <div class="blessings-section">
            <label class="form-label">常用祝福语</label>
            <div class="blessings-list">
              <div class="blessing-item">恭喜发财</div>
              <div class="blessing-item">万事如意</div>
              <div class="blessing-item">阖家幸福</div>
              <div class="blessing-item">工作顺利</div>
              <div class="blessing-item">学业进步</div>
              <div class="blessing-item">心想事成</div>
            </div>
          </div>
          
          <div class="range-section">
            <label class="form-label">领取范围</label>
            <div class="range-options">
              <div class="range-option active">群内所有人</div>
              <div class="range-option">指定成员</div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">红包封面</label>
            <input type="text" class="form-control" placeholder="选择红包封面">
          </div>
        </form>
      </div>
    </div>
    
    <!-- 2. 喜庆红包 -->
    <div class="redpacket-page theme2" id="style2">
      <i class="fa fa-star redpacket-decoration decor-top-left floating"></i>
      <i class="fa fa-heart redpacket-decoration decor-bottom-right floating" style="animation-delay: 1s;"></i>
      
      <div class="navbar">
        <div class="nav-btn cancel-btn">取消</div>
        <div class="nav-title">发喜庆红包</div>
        <div class="nav-btn send-btn">塞钱进红包</div>
      </div>
      
      <div class="content">
        <div class="amount-section">
          <div class="amount-label">红包金额</div>
          <div class="amount-input-container">
            <input type="number" class="amount-input" value="20" min="0.01" step="0.01">
            <span class="amount-unit">元</span>
          </div>
          <div class="amount-tips">最少0.01元，最多200元</div>
        </div>
        
        <div class="type-selector">
          <div class="type-option active">
            <div class="type-icon"><i class="fa fa-trophy"></i></div>
            <div class="type-name">手气最佳</div>
          </div>
          <div class="type-option">
            <div class="type-icon"><i class="fa fa-users"></i></div>
            <div class="type-name">人人有份</div>
          </div>
          <div class="type-option">
            <div class="type-icon"><i class="fa fa-fire"></i></div>
            <div class="type-name">抢红包雨</div>
          </div>
        </div>
        
        <form class="redpacket-form">
          <div class="form-group">
            <label class="form-label">红包个数</label>
            <div class="count-input-group">
              <div class="count-btn minus-btn">-</div>
              <input type="number" class="form-control count-input" value="10" min="1" max="100">
              <div class="count-btn plus-btn">+</div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">节日祝福</label>
            <input type="text" class="form-control" placeholder="节日快乐，幸福安康">
          </div>
          
          <div class="blessings-section">
            <label class="form-label">节日祝福语</label>
            <div class="blessings-list">
              <div class="blessing-item">新年快乐</div>
              <div class="blessing-item">中秋快乐</div>
              <div class="blessing-item">端午安康</div>
              <div class="blessing-item">国庆快乐</div>
              <div class="blessing-item">春节愉快</div>
              <div class="blessing-item">阖家欢乐</div>
            </div>
          </div>
          
          <div class="range-section">
            <label class="form-label">领取范围</label>
            <div class="range-options">
              <div class="range-option active">所有好友</div>
              <div class="range-option">指定群组</div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">红包主题</label>
            <input type="text" class="form-control" placeholder="选择节日主题">
          </div>
        </form>
      </div>
    </div>
    
    <!-- 3. 浪漫红包 -->
    <div class="redpacket-page theme3" id="style3">
      <i class="fa fa-heart redpacket-decoration decor-top-left floating"></i>
      <i class="fa fa-heart-o redpacket-decoration decor-bottom-right floating" style="animation-delay: 1s;"></i>
      
      <div class="navbar">
        <div class="nav-btn cancel-btn">取消</div>
        <div class="nav-title">发心意红包</div>
        <div class="nav-btn send-btn">确认发送</div>
      </div>
      
      <div class="content">
        <div class="amount-section">
          <div class="amount-label">红包金额</div>
          <div class="amount-input-container">
            <input type="number" class="amount-input" value="52.00" min="0.01" step="0.01">
            <span class="amount-unit">元</span>
          </div>
          <div class="amount-tips">最少0.01元，最多999.99元</div>
        </div>
        
        <div class="type-selector">
          <div class="type-option active">
            <div class="type-icon"><i class="fa fa-user"></i></div>
            <div class="type-name">专属红包</div>
          </div>
          <div class="type-option">
            <div class="type-icon"><i class="fa fa-clock-o"></i></div>
            <div class="type-name">定时惊喜</div>
          </div>
          <div class="type-option">
            <div class="type-icon"><i class="fa fa-picture-o"></i></div>
            <div class="type-name">照片红包</div>
          </div>
        </div>
        
        <form class="redpacket-form">
          <div class="form-group">
            <label class="form-label">接收对象</label>
            <input type="text" class="form-control" placeholder="选择收红包的人">
          </div>
          
          <div class="form-group">
            <label class="form-label">真情告白</label>
            <input type="text" class="form-control" placeholder="输入你想表达的心意">
          </div>
          
          <div class="blessings-section">
            <label class="form-label">浪漫祝福语</label>
            <div class="blessings-list">
              <div class="blessing-item">我爱你</div>
              <div class="blessing-item">永远爱你</div>
              <div class="blessing-item">有你真好</div>
              <div class="blessing-item">余生是你</div>
              <div class="blessing-item">一见钟情</div>
              <div class="blessing-item">节日快乐</div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">选择封面</label>
            <input type="text" class="form-control" placeholder="选择浪漫封面">
          </div>
          
          <div class="form-group">
            <label class="form-label">发送时间</label>
            <input type="text" class="form-control" placeholder="立即发送">
          </div>
        </form>
      </div>
    </div>
    
    <!-- 4. 商务红包 -->
    <div class="redpacket-page theme4" id="style4">
      <i class="fa fa-briefcase redpacket-decoration decor-top-left floating"></i>
      <i class="fa fa-line-chart redpacket-decoration decor-bottom-right floating" style="animation-delay: 1s;"></i>
      
      <div class="navbar">
        <div class="nav-btn cancel-btn">取消</div>
        <div class="nav-title">企业红包</div>
        <div class="nav-btn send-btn">确认发放</div>
      </div>
      
      <div class="content">
        <div class="amount-section">
          <div class="amount-label">红包总金额</div>
          <div class="amount-input-container">
            <input type="number" class="amount-input" value="1000" min="0.01" step="0.01">
            <span class="amount-unit">元</span>
          </div>
          <div class="amount-tips">最少0.01元，最多10000元</div>
        </div>
        
        <div class="type-selector">
          <div class="type-option active">
            <div class="type-icon"><i class="fa fa-gift"></i></div>
            <div class="type-name">福利红包</div>
          </div>
          <div class="type-option">
            <div class="type-icon"><i class="fa fa-trophy"></i></div>
            <div class="type-name">奖励红包</div>
          </div>
          <div class="type-option">
            <div class="type-icon"><i class="fa fa-calendar-check-o"></i></div>
            <div class="type-name">节日福利</div>
          </div>
        </div>
        
        <form class="redpacket-form">
          <div class="form-group">
            <label class="form-label">红包个数</label>
            <div class="count-input-group">
              <div class="count-btn minus-btn">-</div>
              <input type="number" class="form-control count-input" value="50" min="1" max="500">
              <div class="count-btn plus-btn">+</div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">红包说明</label>
            <input type="text" class="form-control" placeholder="输入红包发放说明">
          </div>
          
          <div class="blessings-section">
            <label class="form-label">常用祝福</label>
            <div class="blessings-list">
              <div class="blessing-item">工作顺利</div>
              <div class="blessing-item">再创佳绩</div>
              <div class="blessing-item">感谢付出</div>
              <div class="blessing-item">团队共赢</div>
              <div class="blessing-item">辛苦了</div>
              <div class="blessing-item">再接再厉</div>
            </div>
          </div>
          
          <div class="range-section">
            <label class="form-label">发放范围</label>
            <div class="range-options">
              <div class="range-option active">全体成员</div>
              <div class="range-option">指定部门</div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">企业标识</label>
            <input type="text" class="form-control" placeholder="选择企业红包封面">
          </div>
        </form>
      </div>
    </div>
    
    <!-- 5. 新年红包 -->
    <div class="redpacket-page theme5" id="style5">
      <i class="fa fa-star redpacket-decoration decor-top-left floating"></i>
      <i class="fa fa-yen redpacket-decoration decor-bottom-right floating" style="animation-delay: 1s;"></i>
      
      <div class="navbar">
        <div class="nav-btn cancel-btn">取消</div>
        <div class="nav-title">新年红包</div>
        <div class="nav-btn send-btn">发红包</div>
      </div>
      
      <div class="content">
        <div class="amount-section">
          <div class="amount-label">红包金额</div>
          <div class="amount-input-container">
            <input type="number" class="amount-input" value="88.88" min="0.01" step="0.01">
            <span class="amount-unit">元</span>
          </div>
          <div class="amount-tips">新年红包，寓意吉祥</div>
        </div>
        
        <div class="type-selector">
          <div class="type-option active">
            <div class="type-icon"><i class="fa fa-fire"></i></div>
            <div class="type-name">红包雨</div>
          </div>
          <div class="type-option">
            <div class="type-icon"><i class="fa fa-child"></i></div>
            <div class="type-name">压岁钱</div>
          </div>
          <div class="type-option">
            <div class="type-icon"><i class="fa fa-gift"></i></div>
            <div class="type-name">拜年红包</div>
          </div>
        </div>
        
        <form class="redpacket-form">
          <div class="form-group">
            <label class="form-label">红包个数</label>
            <div class="count-input-group">
              <div class="count-btn minus-btn">-</div>
              <input type="number" class="form-control count-input" value="18" min="1" max="100">
              <div class="count-btn plus-btn">+</div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">新年祝福</label>
            <input type="text" class="form-control" placeholder="新年大吉，万事如意">
          </div>
          
          <div class="blessings-section">
            <label class="form-label">新年祝福语</label>
            <div class="blessings-list">
              <div class="blessing-item">恭喜发财</div>
              <div class="blessing-item">红包拿来</div>
              <div class="blessing-item">新年大吉</div>
              <div class="blessing-item">阖家幸福</div>
              <div class="blessing-item">财源广进</div>
              <div class="blessing-item">步步高升</div>
            </div>
          </div>
          
          <div class="range-section">
            <label class="form-label">红包范围</label>
            <div class="range-options">
              <div class="range-option active">亲友群</div>
              <div class="range-option">家族群</div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">红包封面</label>
            <input type="text" class="form-control" placeholder="选择新年主题封面">
          </div>
        </form>
      </div>
    </div>
    
    <!-- 6. 个性红包 -->
    <div class="redpacket-page theme6" id="style6">
      <i class="fa fa-music redpacket-decoration decor-top-left floating"></i>
      <i class="fa fa-gamepad redpacket-decoration decor-bottom-right floating" style="animation-delay: 1s;"></i>
      
      <div class="navbar">
        <div class="nav-btn cancel-btn">取消</div>
        <div class="nav-title">个性红包</div>
        <div class="nav-btn send-btn">发送红包</div>
      </div>
      
      <div class="content">
        <div class="amount-section">
          <div class="amount-label">红包金额</div>
          <div class="amount-input-container">
            <input type="number" class="amount-input" value="66.66" min="0.01" step="0.01">
            <span class="amount-unit">元</span>
          </div>
          <div class="amount-tips">最少0.01元，最多520元</div>
        </div>
        
        <div class="type-selector">
          <div class="type-option active">
            <div class="type-icon"><i class="fa fa-puzzle-piece"></i></div>
            <div class="type-name">答题红包</div>
          </div>
          <div class="type-option">
            <div class="type-icon"><i class="fa fa-music"></i></div>
            <div class="type-name">听歌识曲</div>
          </div>
          <div class="type-option">
            <div class="type-icon"><i class="fa fa-picture-o"></i></div>
            <div class="type-name">看图猜谜</div>
          </div>
        </div>
        
        <form class="redpacket-form">
          <div class="form-group">
            <label class="form-label">红包个数</label>
            <div class="count-input-group">
              <div class="count-btn minus-btn">-</div>
              <input type="number" class="form-control count-input" value="6" min="1" max="50">
              <div class="count-btn plus-btn">+</div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">红包题目</label>
            <input type="text" class="form-control" placeholder="输入红包题目">
          </div>
          
          <div class="form-group">
            <label class="form-label">正确答案</label>
            <input type="text" class="form-control" placeholder="设置正确答案">
          </div>
          
          <div class="blessings-section">
            <label class="form-label">个性祝福语</label>
            <div class="blessings-list">
              <div class="blessing-item">智商担当</div>
              <div class="blessing-item">脑洞大开</div>
              <div class="blessing-item">慧眼识珠</div>
              <div class="blessing-item">音乐达人</div>
              <div class="blessing-item">猜谜高手</div>
              <div class="blessing-item">学霸模式</div>
            </div>
          </div>
          
          <div class="form-group">
            <label class="form-label">红包样式</label>
            <input type="text" class="form-control" placeholder="选择个性红包样式">
          </div>
        </form>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = '1';
    
    // DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const redpacketPages = {
      '1': document.getElementById('style1'),
      '2': document.getElementById('style2'),
      '3': document.getElementById('style3'),
      '4': document.getElementById('style4'),
      '5': document.getElementById('style5'),
      '6': document.getElementById('style6')
    };
    
    // 初始化
    function init() {
      // 样式切换事件
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = this.getAttribute('data-style');
          switchStyle(style);
        });
      });
      
      // 初始化数量增减按钮
      initCountButtons();
      
      // 初始化类型选择
      initTypeSelectors();
      
      // 初始化祝福语选择
      initBlessingSelectors();
      
      // 初始化范围选择
      initRangeSelectors();
      
      // 初始化发送按钮
      initSendButtons();
      
      // 初始化取消按钮
      initCancelButtons();
    }
    
    // 切换样式
    function switchStyle(style) {
      // 隐藏所有页面
      Object.values(redpacketPages).forEach(page => {
        page.classList.remove('active');
      });
      
      // 显示选中的样式
      if (redpacketPages[style]) {
        redpacketPages[style].classList.add('active');
        currentStyle = style;
      }
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (option.getAttribute('data-style') === style) {
          option.classList.add('active');
        }
      });
    }
    
    // 初始化数量增减按钮
    function initCountButtons() {
      document.addEventListener('click', function(e) {
        // 减号按钮
        if (e.target.closest('.minus-btn')) {
          const btn = e.target.closest('.minus-btn');
          const input = btn.closest('.count-input-group').querySelector('.count-input');
          let value = parseInt(input.value);
          const min = parseInt(input.min) || 1;
          
          if (value > min) {
            input.value = value - 1;
          }
        }
        
        // 加号按钮
        if (e.target.closest('.plus-btn')) {
          const btn = e.target.closest('.plus-btn');
          const input = btn.closest('.count-input-group').querySelector('.count-input');
          let value = parseInt(input.value);
          const max = parseInt(input.max) || 100;
          
          if (value < max) {
            input.value = value + 1;
          }
        }
      });
    }
    
    // 初始化类型选择器
    function initTypeSelectors() {
      document.addEventListener('click', function(e) {
        if (e.target.closest('.type-option')) {
          const option = e.target.closest('.type-option');
          const selector = option.closest('.type-selector');
          
          // 移除其他选中状态
          selector.querySelectorAll('.type-option').forEach(item => {
            item.classList.remove('active');
          });
          
          // 添加当前选中状态
          option.classList.add('active');
        }
      });
    }
    
    // 初始化祝福语选择
    function initBlessingSelectors() {
      document.addEventListener('click', function(e) {
        if (e.target.closest('.blessing-item')) {
          const item = e.target.closest('.blessing-item');
          const input = item.closest('.redpacket-form').querySelector('input[placeholder*="祝福"], input[placeholder*="告白"], input[placeholder*="留言"]');
          
          // 设置输入框内容
          input.value = item.textContent;
          
          // 更新选中状态
          item.closest('.blessings-list').querySelectorAll('.blessing-item').forEach(blessing => {
            blessing.classList.remove('active');
          });
          item.classList.add('active');
        }
      });
    }
    
    // 初始化范围选择
    function initRangeSelectors() {
      document.addEventListener('click', function(e) {
        if (e.target.closest('.range-option')) {
          const option = e.target.closest('.range-option');
          
          // 移除其他选中状态
          option.closest('.range-options').querySelectorAll('.range-option').forEach(item => {
            item.classList.remove('active');
          });
          
          // 添加当前选中状态
          option.classList.add('active');
        }
      });
    }
    
    // 初始化发送按钮
    function initSendButtons() {
      document.addEventListener('click', function(e) {
        if (e.target.closest('.send-btn')) {
          const page = e.target.closest('.redpacket-page');
          const amount = page.querySelector('.amount-input').value;
          const count = page.querySelector('.count-input') ? page.querySelector('.count-input').value : '1';
          const type = page.querySelector('.type-option.active .type-name').textContent;
          
          if (parseFloat(amount) <= 0) {
            alert('请输入有效的红包金额');
            return;
          }
          
          if (parseInt(count) <= 0) {
            alert('请输入有效的红包个数');
            return;
          }
          
          // 计算单个红包金额
          const perAmount = (parseFloat(amount) / parseInt(count)).toFixed(2);
          const message = type.includes('拼手气') || type.includes('手气') 
            ? `确定要发送${count}个总金额${amount}元的${type}红包吗？`
            : `确定要发送${count}个，每个${perAmount}元的${type}红包吗？`;
          
          if (confirm(message)) {
            alert('红包发送成功！');
          }
        }
      });
    }
    
    // 初始化取消按钮
    function initCancelButtons() {
      document.addEventListener('click', function(e) {
        if (e.target.closest('.cancel-btn')) {
          if (confirm('确定要取消发红包吗？')) {
            // 可以在这里添加重置表单的逻辑
          }
        }
      });
    }
    
    // 启动
    init();
  </script>
</body>
</html>
